<template>
  <div class="numBody">
    <div class="numBodyTitle">
      <span>{{ item.name }}</span>
      <p>({{ item.unit }})</p>
    </div>
    <div class="numList">
      <div class="numListItem" v-for="(digit, index) in digits" :key="index">
        <gsapNum :number="digit"></gsapNum>
      </div>
    </div>
  </div>
</template>

<script>
import {gsap} from 'gsap';
import gsapNum from "@/components/gsapNum/index.vue";

export default {
  data() {
    return {}
  },
  computed: {
    digits() {
      return this.item.value.toString().split('');
    }
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {gsapNum},
  watch: {
    digits() {
      this.animateNumber();
    },
  },
  methods: {
    animateNumber() {
      const animatableObj = {value: 0};
      gsap.to(animatableObj, {
        value: this.num,
        duration: 2, // 动画持续时间，根据需要调整
        ease: "power1.inOut", // 动画效果
        onUpdate: () => {
          // 在每次更新时设置 animatedNum
          this.animatedNum = Math.floor(animatableObj.value);
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.numBody {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  width: calc(100% - 40px - 20px);
  margin-left: 40px;
  position: relative;
  height: 90px;

  .numBodyTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 40px;
    align-content: flex-start;

    span {
      font-size: 24px;
      font-family: AlimamaShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
    }

    p {
      font-size: 16px;
      font-family: AlimamaShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  .numList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    height: 50px;

    .numListItem {
      background: url("./assets/numbg.png") no-repeat;
      width: 35px;
      height: 50px;
      position: relative;
      background-size: 100% 100%;
      margin-right: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    :deep(.numListItem) {
      .numcard {
        margin-top: -5px;
      }

      .gsapNum {
        font-size: 30px;
        font-family: DIN-Bold;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }
}
</style>
